<template>
  <div class="fluidSimulation">
    <div class="fluidSimulation-top">
      <span>
        流体仿真
      </span>
      <el-popover
          class="fluidSimulation-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键再点击模型中任意位置实现流体仿真，目前问题比复杂，不建议存储在页面中">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="fluidSimulation-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="fluidSimulation-data">
      <el-form ref="fluidSimulationData" :model="fluidSimulationObj" label-width="110px">
        <el-form-item label="仿真范围">
          <el-input-number v-model="fluidSimulationObj.width" :step="5" :min="50"></el-input-number>
        </el-form-item>
        <el-form-item label="仿真高度">
          <el-input-number v-model="fluidSimulationObj.height" :step="1" :min="5" :max="30"></el-input-number>
        </el-form-item>
        <el-form-item label="流体类型">
          <el-input-number v-model="fluidSimulationObj.style" :step="1" :min="0" :max="23"></el-input-number>
        </el-form-item>
        <el-form-item label="流体颜色" class="color">
          <el-color-picker color-format="rgb" v-model="fluidSimulationObj.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="出水点设置:">
        </el-form-item>
        <el-form-item label="出水点旋转" class="font">
          <el-input-number v-model="fluidSimulationObj.sources[0].rotation[0]" :step="0.1"></el-input-number>
          (Pitch)
          <el-input-number v-model="fluidSimulationObj.sources[0].rotation[1]" :step="0.1"></el-input-number>
          (Yaw)
          <el-input-number v-model="fluidSimulationObj.sources[0].rotation[2]" :step="0.1"></el-input-number>
          (Roll)
        </el-form-item>
        <el-form-item label="出水点范围">
          <el-input-number v-model="fluidSimulationObj.sources[0].width" :step="1" :min="1" :max="20"></el-input-number>
        </el-form-item>
        <el-form-item label="出水点高度">
          <el-input-number v-model="fluidSimulationObj.sources[0].height" :step="0.1" :min="1"
                           :max="2"></el-input-number>
        </el-form-item>
        <el-form-item label="出水点向量" class="font">
          <el-input-number v-model="fluidSimulationObj.sources[0].velocity[0]" :step="0.1" :min="-2"
                           :max="2"></el-input-number>
          (U)
          <el-input-number v-model="fluidSimulationObj.sources[0].velocity[1]" :step="0.1" :min="-2"
                           :max="2"></el-input-number>
          (V)
        </el-form-item>
        <el-form-item label="出水点形状">
          <el-radio-group v-model="fluidSimulationObj.sources[0].shape">
            <el-radio :label="0">矩形点</el-radio>
            <el-radio :label="1">圆形点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="执行时间">
          <el-input-number v-model="fluidSimulationObj.sources[0].duration" :step="1" :min="-1"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="fluidSimulation-btn">
      <el-button @click="selectFluidSimulation()">选择区域</el-button>
      <el-button @click="delFluidSimulation()">删除</el-button>
      <el-button @click="closeFluidSimulation()">关闭</el-button>
      <el-button @click="saveFluidSimulation()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/fluidSimulation';
</style>
<script>
/* eslint-disable */

export default {
  name: "fluidSimulation",
  props: {
    apiLists: {
      type: Object,
    },
  },
  data() {
    return {
      fluidSimulationObj: {
        width: 400,
        height: 10,
        style: 8,
        color: 'rgb(15,143,187)',
        sources: [
          {
            rotation: [0, 0, 0],
            width: 1,
            height: 1,
            velocity: [0, 0],
            shape: 1,
            duration: -1,
          },
        ],
      },
      object: {},
      data: {},
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectFluidSimulation() {
      this.$emit('select-fluidSimulation');
    },
    async addFluidSimulation(objectLocation) {
      let color = this.extractRGBComponents(this.fluidSimulationObj.color)
      let x = objectLocation[0];
      let y = objectLocation[1];
      let z = objectLocation[2]
      let bbox = [
        x - this.fluidSimulationObj.width,
        y - this.fluidSimulationObj.width,
        z - this.fluidSimulationObj.height,
        x + this.fluidSimulationObj.width,
        y + this.fluidSimulationObj.width,
        z + this.fluidSimulationObj.height];
      let bbox2 = [
        x - this.fluidSimulationObj.sources[0].width,
        y - this.fluidSimulationObj.sources[0].width,
        z + 0.1,
        x + this.fluidSimulationObj.sources[0].width,
        y + this.fluidSimulationObj.sources[0].width,
        z + this.fluidSimulationObj.sources[0].height + 0.1]
      __g.fluid.delete("ff");
      this.object = {
        id: "ff",
        bbox: bbox,
        style: this.fluidSimulationObj.style,
        color: color,
        sources: [
          {
            id: "ff_1",
            rotation: this.fluidSimulationObj.sources[0].rotation,
            bbox: bbox2,
            velocity: this.fluidSimulationObj.sources[0].velocity,
            shape: this.fluidSimulationObj.sources[0].shape,
            duration: this.fluidSimulationObj.sources[0].duration,
          },
        ],
      };
      await __g.fluid.add(this.object);
      __g.fluid.focus(this.object.id, 20, 2);
      this.data = [
        {
          id: "ff",
          sources: [
            {
              id: "ff_1",
              active: true,
            },
          ],
        },
      ];
      __g.fluid.continueSource(this.data);
    },
    delFluidSimulation() {
      __g.fluid.clear();
    },
    closeFluidSimulation() {
      this.$emit('close-popup');
      this.reloadFluidSimulation()
    },
    reloadFluidSimulation() {
      this.fluidSimulationObj = {
        width: 200,
        height: 20,
        style: 8,
        color: 'rgb(15,143,187)',
        sources: [
          {
            rotation: [0, 0, 0],
            width: 2,
            height: 1,
            velocity: [0, 0],
            shape: 1,
            duration: -1,
          },
        ],
      }
      this.object = {}
      this.data = {}
    },
    saveFluidSimulation() {
      if (this.object && this.object !== {} && this.data && this.data !== {}) {
        let obj = {
          api: 'FluidSimulation',
          object: this.object,
          data: this.data,
        }
        this.apiLists.push(obj)
        this.$message.success("保存成功")
      } else {
        this.$message.warning("先添加对象");
      }
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadFluidSimulation()
  },
};
</script>